<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>模糊查询</title>

    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        div {
            text-align: center;
            padding-top: 20px;
        }

        ul {
            padding-top: 20px;
            width: 30%;
            margin: 0 50% 0 35%;
        }

        li {
            padding: 3px;
            border: 1px solid silver;
            box-shadow: 1px 1px;
        }
    </style>
</head>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

<body>
    <div>
        <input type="text" id="txt">
        <button type="button" id="btn">search</button>
        <ul id="list">

        </ul>
    </div>
    <script>
        /**
         * Created by Steven on 2016-10-25.
         */
        var oTxt = document.getElementById('txt');
        var oBtn = document.getElementById('btn');
        var oList = document.getElementById('list');

        var fruits = ["桃子", "苹果", "梨子", "香蕉", "香瓜", "葡萄", "柠檬", "橘子", "草莓", "草莓子", "草拟吗", "s", "ssr"];

        //回车查询

        $('#txt').on('input', function () {


            var keyWord = oTxt.value;
            // var fruitList = searchByIndexOf(keyWord,fruits);
            debounce( handleSearch,300)(keyWord)

        });

        var handleSearch = function handleSearch(keyWord) {
            console.log("字母搜索")

            var fruitList = searchByRegExp(keyWord, fruits);
            renderFruits(fruitList);

        }

        function debounce(func, wait = 50) {
            // 缓存一个定时器id
            // 这里返回的函数是每次用户实际调用的防抖函数
            // 如果已经设定过定时器了就清空上一次的定时器
            // 开始一个新的定时器，延迟执行用户传入的方法
            return function (...args) {
                console.log(window.debounceTimer,'有没有a');
                if (window.debounceTimer) clearTimeout(window.debounceTimer)
                window.debounceTimer = setTimeout(() => {
                    func.apply(this, args) //1. 修改this指向至正确的对象 2. 为了保留event对象的参数
                }, wait)
              
            }
        }

        function renderFruits(list) {
            if (!(list instanceof Array)) {
                return;
            }
            oList.innerHTML = '';
            var len = list.length;
            var item = null;
            for (var i = 0; i < len; i++) {
                item = document.createElement('li');
                item.innerHTML = list[i];
                oList.appendChild(item);
            }
        }
        //模糊匹配的时候如果不区分大小写，可以使用toLowerCase()或者toUpperCase()转换之后去匹配。

        //模糊查询1:利用字符串的indexOf方法
        function searchByIndexOf(keyWord, list) {
            if (!(list instanceof Array)) {
                return;
            }
            var len = list.length;
            var arr = [];
            for (var i = 0; i < len; i++) {
                //如果字符串中不包含目标字符会返回-1
                if (list[i].indexOf(keyWord) >= 0) {
                    arr.push(list[i]);
                }
            }
            return arr;
        }
        //正则匹配
        function searchByRegExp(keyWord, list) {
            if (!(list instanceof Array)) {
                return;
            }
            var len = list.length;
            var arr = [];
            var reg = new RegExp(keyWord);
            for (var i = 0; i < len; i++) {
                //如果字符串中不包含目标字符会返回-1
                if (list[i].match(reg)) {
                    arr.push(list[i]);
                }
            }
            return arr;
        }
        renderFruits(fruits);
    </script>
</body>

</html>